<template>
	<el-row :gutter="50">
		<el-col :span="6" v-for="(item, index) in currentPageData" :key="index">
			<div class="content">
				<div>
					<h3>{{ item.taskName }}</h3>
					<p>{{ item.taskDesc }}</p>

					<el-popover effect="light" trigger="hover" placement="top" width="auto" arrow-class="my-arrow" popper-class="my-popper">
						<template #default>
							<div>任务明细: {{ item.taskDesc }}</div>
							<div>发布人: {{ item.publisher }}</div>
							<div>任务报酬: {{ item.salary }}</div>
							<div>任务级别: {{ item.level }}</div>
							<div>截止时间: {{ item.deadline }}</div>
							<b style=" color: yellow;">点击以进入明细页</b>
						</template>
						<template #reference>
							<el-button @click="showDetail(item)">任务明细</el-button>
						</template>
					</el-popover>
				</div>
			</div>
		</el-col>
	</el-row>
	<!-- 分页模块 -->
	<div style="display:flex;justify-content:center;padding: 10px;margin-bottom: 25px;">
		<el-pagination
			v-model:current-page="pageNo"
			v-model:page-size="pageSize"
			:page-sizes="[12, 24, 48, 96]"
			:small="false"
			:disabled="false"
			:background="true"
			layout="total, sizes, prev, pager, next"
			:total="totalCount"
		/>
	</div>
</template>

<script>
import myReceive from './myReceive.vue';
import { getTaskList, getMyTask } from '@/api/task';
import store from '@/store/index';
import { ElMessage } from 'element-plus';

export default {
	name: 'taskShow',
	methods: {
		handleSelect() {},
		showDetail(item) {
			store.commit('MUTATION_TASK_DETAIL', item);
			this.$router.push('/home/task-detail');
		},
		refreshData() {
			this.$nextTick(() => {
				const type = this.$route.fullPath.split('/').pop(0);
				this.taskList = [];
				if (type === 'find') {
					this.searchStr = {
						name: this.searchName,
						desc: this.searchDesc
					};
					const param = { searchStr: this.searchStr, state: 'unfinished' };

					getTaskList(param).then(res => {
						if (res.success) {
							this.taskList = res.rows;
							this.totalCount = res.total;
						}
					});
				} else if (type === 'my') {
					const user = window.sessionStorage.getItem('user');
					getMyTask(user, false).then(res => {
						if (res.success) {
							this.taskList = res.rows;
							this.totalCount = res.total;
						}
					});
				} else {
					ElMessage.error('此路径无效！');
					this.$router.push('/home/index');
				}
			});
		}
	},
	data() {
		return {
			pageNo: 1,
			pageSize: 12,
			totalCount: 0,

			taskList: [],
			searchName: '',
			searchDesc: ''
		};
	},
	computed: {
		currentPageData() {
			const startIndex = (this.pageNo - 1) * this.pageSize;
			const endIndex = startIndex + this.pageSize;
			return this.taskList.slice(startIndex, endIndex);
		}
	},
	watch: {
		$route(to, from) {
			// console.log(to.fullPathx);
			if (to.fullPath.includes('/home/task-show')) {
				this.refreshData();
			}
		}
	},

	mounted() {
		this.refreshData();
	},
	beforeRouteLeave(to, from, next) {
		this.taskList = [];
		next();
	},
	beforeRouteEnter(to, from, next) {
		next(vm => {
			vm.taskList = [];
		});
	}
};
</script>

<style scoped>
.content {
	height: 200px;

	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(255, 255, 255, 0.7);
	border: 1px solid rgba(0, 0, 0, 0.1);
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
	border-radius: 10px;
	margin-bottom: 30px;
	margin-top: 50px;
}
</style>
